<div id="dropIn" style="position: relative; min-height: 146px;"></div>
<!-- Example: Response message containers -->
<p id="error"></p>
<p id="loading"></p>
<p id="success"></p>
<script>

  moi.createScript('https://checkout.airwallex.com/assets/elements.bundle.min.js', function () {
    try {
      // STEP #2: Initialize the Airwallex global context for event communication
      Airwallex.init({
        env: "{$config['env']}", // Setup which Airwallex env('staging' | 'demo' | 'prod') to integrate with
        origin: window.location.origin, // Setup your event target to receive the browser events message
        fonts: [
          // Customizes the font for the payment elements
          {
            src: 'https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2',
            family: 'AxLLCircular',
            weight: 400,
          },
        ],
      });
      // STEP #4: Create 'dropIn' element
      const dropIn = Airwallex.createElement('dropIn', {
        // Required, dropIn use intent Id, client_secret and currency to prepare checkout
        intent_id: "{$config['payment_intents_id']}",
        client_secret: "{$config['client_secret']}",
        currency: "{$config['standard_code']}",
        withBilling: true,
        // if you want to use google pay, please pass merchant country code in applePayRequestOptions
        applePayRequestOptions: {
          countryCode: "{$this->order->billing_address['country_code']}",
        },
        // if you want to use google pay, please pass merchant country code in googlePayRequestOptions
        googlePayRequestOptions: {
          countryCode: "{$this->order->billing_address['country_code']}",
        },
      });
      // STEP #5: Mount 'dropIn' element
      dropIn.mount('dropIn'); // This 'dropIn' id MUST MATCH the id on your empty container created in Step 3
      moi.appendLoading({ theme: 'light', container: '#dropIn' })
    } catch (error) {
      document.getElementById('loading').style.display = 'none'; // Example: hide loading state
      document.getElementById('error').style.display = 'block'; // Example: show error
      document.getElementById('error').innerHTML = error.message; // Example: set error message
      console.error('There was an error', error);
    }
    // STEP #6: Add an event listener to handle events when the element is mounted
    window.addEventListener('onReady', (event) => {
      /*
      ... Handle event
      */
      document.getElementById('dropIn').style.display = 'block'; // Example: show element when mounted
      document.getElementById('loading').style.display = 'none'; // Example: hide loading tag when element is mounted
      console.log('Element is ready', event.detail);

      moi.removeLoading("#dropIn")
      // ajaxLoading()
    });
    // STEP #7: Add an event listener to handle events when the payment is successful.
    window.addEventListener('onSuccess', (event) => {
      document.getElementById('success').style.display = 'block'; // Example: show success block
      console.log('airwallex success:' + JSON.stringify(event.detail))
      window.location.href = "{$aDomain}/checkouts/success/{$checkoutToken}"
    });
    // STEP #8: Add an event listener to handle events when the payment has failed.
    window.addEventListener('onError', (event) => {
      const { error } = event.detail;
      document.getElementById('error').style.display = 'block'; // Example: show error block
      document.getElementById('error').innerHTML = error.message; // Example: set error message
      console.error('There was an error', error);
    });

    window.addEventListener('onSubmit', (event) => {
      console.error('There was an onSubmit', event);
    });
    window.addEventListener('onClick', (event) => {
      console.error('There was an onClick', event);
    });
  })

</script>